$(function () {
    localStorage.clear();
    getgdclData()
    setInterval(function () {
        getgdclData()
    }, 1000 * 30)
    // $('.guandaochelouClass').on('click', function () {

    // });
    $('.popupClose3').on('click', function () {
        $('.popupClose3').css('display', 'none');
        $('.popup3').animate({ width: '3px' }, 400, function () {
            $('.popup3').animate({ height: 0 }, 400);
        });
        setTimeout(summaryHide3, 800);
    });


})




function summaryHide3() {
    clearInterval(time1)
    clearInterval(time2)
    localStorage.clear()
    $('.filterbg3').hide();
    $('.popup3').hide();
    $('.popup3').width(0);
};

function guandaochelouClass() {
    var clickIndex = localStorage.getItem("clickIndex");
    if (clickIndex == 3) {
        return
    }
    $('.popupClose' + clickIndex).css('display', 'none');
    $('.popup' + clickIndex).animate({ width: '3px' }, 400, function () {
        $('.popup' + clickIndex).animate({ height: 0 }, 400);
    });
    setTimeout(function () {
        $('.filterbg' + clickIndex).hide();
        $('.popup' + clickIndex).hide();
        $('.popup' + clickIndex).width(0);
        clearInterval(time1)
        clearInterval(time2)
        localStorage.setItem("clickIndex", "3");
    }, 400);
    $('.filterbg3').show();
    $('.popup3').show();
    $('.popup3').width('3px');
    $('.popup3').animate({ height: '70%' }, 400, function () {
        $('.popup3').animate({ width: '50%' }, 400);
    });
    setTimeout(summaryShow3, 800);
}
var time1;
var time2;
function summaryShow3() {

    getguandaochelouData();
    time1 = setInterval(function () {
        getguandaochelouData();
    }, 1000 * 30)
    time2 = setInterval(function () {
        getgdclData()
    }, 1000 * 1)


    $('.popupClose3').css('display', 'block');

};

function getgdclData() {
    $.ajax(baseUrl + ":8091/dev-device-instance/getDeviceDataInfo", {
        method: 'GET',
        data: {
            id: "pdcl",
        },
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            if (result.code == 200) {
                getsyslinkData(result.data.list.records[0])

                if (result.data.list.records[0].Tag42 == 0 && result.data.list.records[0].Tag43 == 0) {
                    document.getElementById("tongxinzhuangtaiId").innerHTML = "正常"
                } else {
                    document.getElementById("tongxinzhuangtaiId").innerHTML = "异常"
                }
                document.getElementById("suanshiliuliangchaId").innerHTML = result.data.list.records[0].Tag45
                document.getElementById("suanshiliuliangchaId2").innerHTML = result.data.list.records[0].Tag59
                document.getElementById("suanshiliuliangchaId3").innerHTML = result.data.list.records[0].Tag57


                document.getElementById("gaoqiaoyoukunliuliang1").innerHTML = result.data.list.records[0].Tag49
                document.getElementById("gaoqiaoyoukunyali1").innerHTML = result.data.list.records[0].Tag47
                document.getElementById("gaoqiaoyoukunwendu1").innerHTML = result.data.list.records[0].Tag50

                document.getElementById("pudongyoukunliuliang1").innerHTML = result.data.list.records[0].Tag54
                document.getElementById("pudongyoukunyali1").innerHTML = result.data.list.records[0].Tag52
                document.getElementById("pudongyoukunwendu1").innerHTML = result.data.list.records[0].Tag55
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}
//pdcl
// /system/detection
function getsyslinkData(val) {
    var data = {
        tag47: val.Tag47,
        tag49: val.Tag49,
        tag50: val.Tag50,
        tag52: val.Tag52,
        tag54: val.Tag54,
        tag55: val.Tag55,
        tag59: val.Tag59,
        tag45: val.Tag45,
        tag58: val.Tag58,
        tag60: val.Tag60,
        tag57: val.Tag57,
        tag48: val.Tag48,
        tag53: val.Tag53,
        tag44: val.Tag44,
        tag46: val.Tag46,
        tag62: val.Tag62,
        tag42: val.Tag42,
        tag43: val.Tag43
    }
    $.ajax("http://192.168.15.10:8080/system/detection/add", {
        method: 'post',
        data: JSON.stringify(data),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {


        },
        error: function (err) {
            console.log(err);
        }
    })

}






var timeArr = []
var ldjzArr = []
var tag52Arr = []
var tag55Arr = []
var tag50Arr = []
var tag49Arr = []
var tag54Arr = []
var liuliangcha;
var wenducha;
function getguandaochelouData() {
    $.ajax("http://192.168.15.10:8080/system/detection/getCurrentDataInfo", {
        method: 'GET',
        headers: {
            "content-type": "application/json",
        },
        success: function (r) {
          
            timeArr=[]
            if (r.code == 200) {
                ldjzArr = r.data.ldjzArr;
                tag52Arr = r.data.tag52Arr;
                tag55Arr = r.data.tag55Arr;
                tag50Arr = r.data.tag50Arr;
                tag49Arr = r.data.tag49Arr;
                tag54Arr = r.data.tag54Arr;
                for (let i = 0; i < r.data.timeArr.length; i++) {
                    timeArr.push(getNowFormatDate(r.data.timeArr[i]))
                }
            
                getguandaochelouChart2()
            }

        },
        error: function (err) {
            console.log(err);
        }
    })
}

//getguandaochelouChartId1

function getguandaochelouChart() {
    var chartDom = document.getElementById('getguandaochelouChartId1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['高桥石化出站压力'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "MPa", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '高桥石化出站压力',
                type: 'line',
                // stack: 'Total',
                data: ldjzArr
            },
        ]
    };

    option && myChart.setOption(option);
    getguandaochelouChart2();
}

//getguandaochelouChartId2
function getguandaochelouChart2() {
    var chartDom = document.getElementById('getguandaochelouChartId2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + "<br>" + params[0].marker + '机场油库进站压力: ' + params[0].data +
                    "<br>" + params[1].marker + '高桥石化出站压力: ' + params[1].data +
                    "<br>" + '差值: ' + Math.abs(Math.abs(params[1].data) - Math.abs(params[0].data)).toFixed(2);
            }
        },
        color: ['aqua', 'red'],
        legend: {
            data: ['机场油库进站压力', '高桥石化出站压力'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "MPa", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '机场油库进站压力',
                type: 'line',
                // stack: 'Total',
                data: tag52Arr
            },
            {
                name: '高桥石化出站压力',
                type: 'line',
                // stack: 'Total',
                data: ldjzArr
            },
        ]
    };

    option && myChart.setOption(option);
    getguandaochelouChart4()
}

function getguandaochelouChart3() {
    var chartDom = document.getElementById('getguandaochelouChartId3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['red', 'aqua'],
        legend: {
            data: ['高桥石化出站温度'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "℃", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '高桥石化出站温度',
                type: 'line',
                // stack: 'Total',
                data: tag50Arr
            },
        ]
    };

    option && myChart.setOption(option);
    getguandaochelouChart4()
}

function getguandaochelouChart4() {
    var chartDom = document.getElementById('getguandaochelouChartId4');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + "<br>" + params[0].marker + '机场油库进站温度: ' + params[0].data +
                    "<br>" + params[1].marker + '高桥石化出站温度: ' + params[1].data +
                    "<br>" + '差值: ' + Math.abs(Math.abs(params[1].data) - Math.abs(params[0].data)).toFixed(2);
            }
        },
        color: ['red', 'aqua'],
        legend: {
            data: ['机场油库进站温度', '高桥石化出站温度'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "℃", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '机场油库进站温度',
                type: 'line',
                // stack: 'Total',
                data: tag55Arr
            },
            {
                name: '高桥石化出站温度',
                type: 'line',
                // stack: 'Total',
                data: tag50Arr
            },
        ]
    };

    option && myChart.setOption(option);
    getguandaochelouChart6()
}

function getguandaochelouChart5() {
    var chartDom = document.getElementById('getguandaochelouChartId5');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['red'],
        legend: {
            data: ['高桥石化出站流量'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "m3/h", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '高桥石化出站流量',
                type: 'line',
                // stack: 'Total',
                data: tag49Arr
            },
        ]
    };

    option && myChart.setOption(option);
    getguandaochelouChart6()
}

function getguandaochelouChart6() {
    var chartDom = document.getElementById('getguandaochelouChartId6');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + "<br>" + params[0].marker + '机场油库进站流量: ' + params[0].data +
                    "<br>" + params[1].marker + '高桥石化出站流量: ' + params[1].data +
                    "<br>" + '差值: ' + Math.abs(Math.abs(params[1].data) - Math.abs(params[0].data)).toFixed(2);
            }
        },
        color: ['red', 'aqua'],
        legend: {
            data: ['机场油库进站流量', '高桥石化出站流量'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "m3/h", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '机场油库进站流量',
                type: 'line',
                // stack: 'Total',
                data: tag54Arr
            },
            {
                name: '高桥石化出站流量',
                type: 'line',
                // stack: 'Total',
                data: tag49Arr
            },
        ]
    };

    option && myChart.setOption(option);
}
